import { createApp } from 'vue'

import { pinia } from './stores'

import { router } from './router'

import { i18n } from './config'

// 更换主题颜色
import './assets/styles/reset.css'
// 自定义scss变量
import './assets/styles/variate.scss'
// scss方式更改 elementplus 样式
import './assets/styles/element/index.scss'
import ElementPlus from 'element-plus'
// 基于断点的隐藏类
import 'element-plus/theme-chalk/display.css'
/* 
hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
hidden-md-only - 当视口在 md 尺寸时隐藏
hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
hidden-lg-only - 当视口在 lg 尺寸时隐藏
hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
hidden-xl-only - 当视口在 xl 尺寸时隐藏
xs	<768px 响应式栅格数或者栅格属性对象	
sm	≥768px 响应式栅格数或者栅格属性对象	
md	≥992px 响应式栅格数或者栅格属性对象	
lg	≥1200px 响应式栅格数或者栅格属性对象	
xl	≥1920px 响应式栅格数或者栅格属性对象	
*/

// 暗黑模式 - 通过sass修改
// import './assets/styles/element/dark.scss'
// 暗黑模式 - 通过css修改
import 'element-plus/theme-chalk/dark/css-vars.css'
import './assets/styles/element/dark.css'

// import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 引入 iconify 图标集合
import { Icon } from '@iconify/vue'

// 引入动画库 https://animate.style/
import 'animate.css';

import { getAssetsFile } from './utils'

import App from './App.vue'

// import chalk from 'chalk';
import picocolors from 'picocolors';

// markdown
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
// import '@kangc/v-md-editor/lib/theme/style/github.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
// 更换vuepress主题颜色
import './assets/styles/markdown.css'
import Prism from 'prismjs';
VMdPreview.use(vuepressTheme, {
  Prism,
});
picocolors.bgMagenta(picocolors.bold('algate-admin: 启动成功'))

if(picocolors.isColorSupported) {
  const hello = [
    picocolors.cyan(picocolors.bold(`^           🐉(●'◡'●)🐉`)),
    picocolors.red(picocolors.bold('|  Hello! 欢迎使用 algate-admin ')),
    picocolors.yellow(picocolors.bold('|  使用 vite + vue3 + typescript + pinia ')),
    picocolors.green(picocolors.bold('|  我正在竭力开发此项目 ')),
    picocolors.cyan(picocolors.bold('|  推荐一篇保姆级的前端技术文档')),
    picocolors.blue(picocolors.bold('|  https://yiming_chang.gitee.io/pure-admin-doc/')),
    picocolors.cyan(picocolors.bold('+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~'))
  ].join('\n');
  console.log(hello);
}

const app = createApp(App)
// 需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册
/* for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
} */
app.component('Icon', Icon)

app
  .use(router)
  .use(pinia)
  .use(i18n)
  .use(ElementPlus)
  .use(VMdPreview)

app.provide('utils', { getAssetsFile })

app.mount('#app')

/* // 网上全局挂载使用 - 不推荐使用
  app.config.globalProperties.$config = {}
  通过 getCurrentInstance 获取
  getCurrentInstance().appContext.config.globalProperties
*/

/* 使用 Provide / Inject - 推荐
  app.provide('$config', {})
  使用：injuect('$config')
*/